<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${'codefish的个人博客('+article.articleTitle+')'}">codefish的个人博客(文章标题)</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/cl-css.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/highlight/styles/railscasts.css">
    <link rel="stylesheet" href="/css/common.css">
</head>
<body>
<!--导航栏-->
<div th:replace="component/componet-navbar::componet-navbar (${0})"></div>


<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">
            <!--            文章正文部分-->
            <div class="cl-artical-content">
                <h2 class="cl-artical-title" th:text="${article.articleTitle}">文章标题</h2>
                <!--                文章类型-->
                <span class="badge badge-info" style="font-size: medium"
                      th:text="${article.articleType}">文章类型(原创/转载)</span>
                <div class="cl-card-tag">
                    <div>
                        <!--                      文章基本数据-->
                        <span><span th:text="${article.watched}">124</span>人浏览/ <span
                                th:text="${article.likes}">200</span>人点赞/
                           <span>3</span>人评论</span>
                        <span style="float: right">最后更新于<span
                                th:text="${#dates.format(article.updateTime,'yyyy-MM-dd HH:mm')}">2021-09-20 12:13:14</span></span>
                    </div>
                    <div style="margin-top: 10px;">
                        文章分类:<a href="#" class="badge badge-dark" th:text="${article.articleCategory}">文章分类</a><br>
                        文章标签:
                        <a href="#" class="badge badge-primary" th:each="tag : ${articleTags}" th:text="${tag}">Java</a>
                    </div>
                </div>
                <!--                mark-down 正文-->
                <div class="cl-artical" id="article-content">
                </div>
                <!--            点赞栏-->
                <div class="cl-artical">
                    <input type="hidden" id="value-article-id" th:value="${article.articleId}"/>
                    <img alt="点赞图标" th:if="${isLogin&&isLike}" th:id="like-ops" islike="true"
                         src="/img/like-icon-active.png" width="30" height="30" style="display: block;cursor: pointer"
                         onclick="like()">
                    <img alt="点赞图标" th:if="${isLogin&&!isLike}" th:id="like-ops" islike="false" src="/img/like-icon.png"
                         width="30" height="30" style="display: block;cursor: pointer" onclick="like()">
                    <img alt="点赞图标" th:if="${!isLogin}" th:id="like-ops" islike="unlogin" src="/img/like-icon.png"
                         width="30" height="30" style="display: block;cursor: pointer" onclick="like()">
                    <span th:text="${article.likes}" id="value-like-count">200</span>
                </div>

            </div>

            <!--            相关文章推荐-->
            <div class="recommend-panel">
                <h4 class="right-card-title">相关文章</h4>
                <div class="card-deck">
                    <div class="card ll-panel">
                        <a class="recommend-panel-link" href="calmlog-details.html">
                            <div class="recommend-panel-top">
                                <img src="/temporary-img/list-image1.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="recommend-panel-bottom">
                                如何有效避免设计作品“空”？
                            </div>
                        </a>
                    </div>
                    <div class="card ll-panel">
                        <a class="recommend-panel-link" href="calmlog-details.html">
                            <div class="recommend-panel-top">
                                <img src="/temporary-img/list-image2.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="recommend-panel-bottom">
                                高点击率钻展，设计环节…
                            </div>
                        </a>
                    </div>
                    <div class="card ll-panel">
                        <a class="recommend-panel-link" href="calmlog-details.html">
                            <div class="recommend-panel-top">
                                <img src="/temporary-img/list-image3.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="recommend-panel-bottom">
                                无敌配色技巧（一）
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!--             评论区-->
            <div class="comment">

                <!--               留言板-->
                <form autocomplete="off">
                    <div>
                        <textarea id="val-comment-content" placeholder="说点什么吧..." class="form-control"
                                  style="resize: none;line-height: 20px;height:100px;position: relative;top:20px"></textarea>
                    </div>
                    <button type="button" onclick="publishComment()" class="btn btn-primary"
                            style="float: right;margin-top: 60px">留言
                    </button>

                    <span class="clearfix"></span>
                </form>

                <h4 class="right-card-title">全部评论</h4>
                <!--                评论面板-->
                <div class="comment-panel" th:each="list : ${commentRecordList}">
                    <div class="comment-panel-portrait">
                        <img src="/img/portrait.png" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div class="comment-author" th:text="${list.get(0).ownerName}">评论者昵称</div>
                            <div>
                                <span th:text="${#dates.format(list.get(0).commentDate,'yyyy-MM-dd HH:mm')}"> 2017-10-01 18:00</span>
                            </div>
                        </div>
                        <div class="comment-panel-content-main" th:text="${list.get(0).content}">评论内容</div>

                        <span class="clearfix"></span>
                        <div class="text-primary">
                                <span style="margin-right: 20px">
                                    <span style="color:black" th:text="${list.get(0).likes}"
                                          th:id="value-comment-like_+${list.get(0).id}">255</span>
                                    <img th:id="comment-like-ops_+${list.get(0).id}"
                                         th:if="${isLogin&&commentLikeSet.contains(list.get(0).id)}" alt="点赞图标"
                                         src="/img/like-icon-active.png" height="20" width="20" islike="true"
                                         onclick="likeComment(this)"
                                         style="position: relative;top:-5px;cursor: pointer">
                                     <img th:id="comment-like-ops_+${list.get(0).id}"
                                          th:if="${!isLogin||!commentLikeSet.contains(list.get(0).id)}" alt="点赞图标"
                                          src="/img/like-icon.png" height="20" width="20" islike="false"
                                          onclick="likeComment(this)"
                                          style="position: relative;top:-5px;cursor: pointer">
                                </span>
                        </div>
                        <!--二级评论面板-->
                        <div class="comment-secondary-panel" th:if="${list.size()>1}">
                            <span class="triangle-icon"><i class="fa fa-sort-asc" aria-hidden="true"></i></span>
                            <div class="comment-panel-content" th:each="item,status : ${list}"
                                 th:if="${status.index>0}">
                                <div class="comment-panel-content-item">
                                    <div class="comment-author" th:text="${item.ownerName}">二级评论昵称</div>
                                    <div>
                                        <span th:text="${#dates.format(item.commentDate,'yyyy-MM-dd HH:mm')}">2017-10-01 18:00</span>
                                        <span style="float: right">
                                            <span style="margin-right: 10px" th:text="${item.likes}"
                                                  th:id="value-comment-like_+${item.id}">255</span>
                                         <img th:id="comment-like-ops_+${item.id}"
                                              th:if="${isLogin&&commentLikeSet.contains(item.id)}" alt="点赞图标"
                                              src="/img/like-icon-active.png" width="20" height="20" islike="true"
                                              onclick="likeComment(this)"
                                              style="position: relative;top:-5px;left: -10px;cursor: pointer">
                                         <img th:id="comment-like-ops_+${item.id}"
                                              th:if="${!isLogin||!commentLikeSet.contains(item.id)}" alt="点赞图标"
                                              src="/img/like-icon.png" width="20" height="20" islike="false"
                                              onclick="likeComment(this)"
                                              style="position: relative;top:-5px;left: -10px;cursor: pointer">
                                        </span>
                                    </div>
                                </div>
                                <div class="comment-panel-content-main" th:text="${item.content}">二级评论内容</div>
                            </div>

                        </div>
                        <!---->
                        <!--                        二级评论回复面板-->
                        <div id="second-comment-form_1" th:id="${'second-comment-form_'+list.get(0).id}"
                             style="margin-top:20px">
                            <input type="text" name="second-comment-content_1" id="second-comment-content_1"
                                   th:id="${'second-comment-content_'+list.get(0).id}" class="form-control"
                                   placeholder="回复 codefish"
                                   th:placeholder="${'回复 '+list.get(0).ownerName}"/>
                            <input type="button" class="btn btn-primary" id="second-comment-btn_1"
                                   th:id="${'second-comment-btn_'+list.get(0).id}"
                                   style="margin-top:20px;float:right" value="回复" onclick="publishSecondComment(this)"/>
                        </div>
                        <!---->
                        <span class="clearfix"></span>
                    </div>
                </div>
            </div>
        </div>
        <!--        侧边栏-->
        <div th:replace="component/component-sidebar::component-sidebar"></div>
    </div>
</div>

<!--页脚-->
<div th:replace="component/component-footer::component-footer"></div>

<!--文章markdown内容-->
<input type="hidden" id="md-content" th:value="${article.articleContent}"/>
<script src="/jquery/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="/js/common.js"></script>
<script src="/js/showdown.min.js"></script>
<script src="/js/like-ops.js"></script>
</body>
</html>
